<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
    //查看接口，理解前后端交互，接口调试
    //https://cnodejs.org/api

    //回顾ajax异步请求对象的事件回调，改为监听模式
    //onreadystatechange

    //第一步：创建XMLHttpRequest对象
    var ajax = new XMLHttpRequest();
    //第二步：创建请求
    // 接口提交什么参数 get查询信息
    ajax.open("get", "https://cnodejs.org/api/v1/topics?page=2&limit=10", true);

    //第三步：接受响应执行回调函数——当状态改变时自动触发该函数
    // 建立连接，事件相应之后监听什么事件
    ajax.addEventListener("readystatechange",function(){ //和下边一行进行对比
//         ajax.onreadystatechange = function () {
        console.log("show something 1");
        // 2.. 成功 3..重定向 4..浏览器错误 5..服务器错误
        if (ajax.readyState == 4 && ajax.status == 200) { //接受数据成功条件
            var txt = ajax.responseText;//字符串
            var data = JSON.parse(txt); //json数据解析为js对象
            console.log(data);//观察数据与https://cnodejs.org/
            // 渲染页面
            //其他DOM操作
        }
      // };        
    });

    //第四步：发送请求
    ajax.send(null);
    
    //理解什么是异步 思考：show something 1先输出还是show something 2先输出？
    console.log("show something 2");

    // show something 2
    // show something 1

    </script>
  </body>
</html>
